<template>
  <div class="table-component">
    <el-table ref="attributeTable" class="table" :data="controlMode" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-bottom: none; margin-bottom: 0">
      <el-table-column property="mode" label="控制方式" min-width="90" align="center">
      </el-table-column>
      <el-table-column property="ip" label="IP" min-width="90" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.ip" placeholder="请输入IP"></el-input>
        </template>
      </el-table-column>
      <el-table-column property="port" label="端口" min-width="90" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.port" placeholder="请输入端口"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <el-table ref="attributeTable" class="table" :data="actions" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-top: none" :height="545">
      <el-table-column type="index" label="功能ID" width="100" align="center"></el-table-column>
      <el-table-column property="name" label="功能名" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column property="udpsIp" label="发送IP" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.udpsIp"></el-input>
        </template>
      </el-table-column>
      <el-table-column property="content" label="内容" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.content"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="medium" :disabled="actions.length === 1" @click="handledelactions(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button class="button circle-plus-button" size="medium" icon="el-icon-circle-plus-outline"
      @click="handleAddactions">
      新增
    </el-button>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      cid: '',
      type: null,
      controlMode: [],
      actions: [],
      device: {
        // 本地保存的数据
        cid: '',
        controlMode: {},
        actions: [],
      },
    }
  },
  watch: {
    controlMode: {
      handler(newValue, oldValue) {
        let arr = [newValue[0].ip, newValue[0].port]
        this.device.controlMode = {
          communicationId: this.cid,
          communication: newValue[0].mode,
          param: JSON.stringify(arr),
        }
        this.device.actions.forEach((item) => {
          item.communication = newValue[0].mode
          item.action_code = newValue[0].mode + item.name
        })
        sessionStorage.setItem('T001', JSON.stringify(this.device))
      },
      deep: true,
    },
    actions: {
      handler(newValue, oldValue) {
        this.device.actions = newValue.map((element) => {
          let obj = {
            communication: this.controlMode[0].mode,
            communicationId: this.cid, //通信方式id，与通信方式对应，每个设备内，唯一
            action: element.name, //行为名称
            name: element.name,
            action_code: this.controlMode[0].mode + element.name,
            content: element.content,
            udpsIp: element.udpsIp,
          }
          return obj
        })
        sessionStorage.setItem('T001', JSON.stringify(this.device))
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    show(id, data, type) {
      this.type = type
      this.cid = id
      this.device.cid = id
      if (data) {
        // 是否有回显值
        if (data.config) {
          // 是否有控制方式
          let config = JSON.parse(data.config)
          config.forEach((element) => {
            if (element.communicationId == id) {
              if (element.param) {
                let arr = JSON.parse(element.param)
                let obj = {
                  mode: element.communication,
                  ip: arr[0],
                  port: arr[1],
                }
                this.controlMode.push(obj)
              }
            }
          })
        }
        if (data.actions) {
          // 是否有功能模块
          let actions = JSON.parse(data.actions)
          actions.forEach((element) => {
            if (element.communicationId == id) {
              let obj = { name: element.name, udpsIp: element.udpsIp, content: element.content }
              this.actions.push(obj)
            }
          })
        }
      }

      // 如果没有默认值
      if (this.controlMode.length < 1) {
        this.controlMode = [
          { mode: 'udp-send', ip: '192.168.0.10', port: '0' },
        ]
      }
      if (this.actions.length < 1) {
        let obj = { name: '开', udpsIp: '192.168.10.149', content: '' }
        this.actions.push(obj)
      }
    },
    // 新增功能
    handleAddactions() {
      let obj = { name: '', udpsIp: '', content: '' }
      this.actions.push(obj)
    },
    // 删除功能
    handledelactions(row) {
      if (this.actions.length > 1) {
        const newArr = this.actions.filter((item) => {
          return item.name != row.name
        })
        this.actions = newArr
      }
    },
  },
}
</script>
  
<style lang="scss" scoped>
.table {
  width: 100%;
  margin-bottom: 20px;
}

.table-component {
  text-align: center;

  .table {
    border: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  .circle-plus-button {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    border-color: transparent;
    margin: 0;
  }
}

.checkbox-group {
  width: 100%;
  text-align: left;
}
</style>
  